<template>
  <div class="data-container">
      <analysis-home :active="5"></analysis-home>
      <div class="analysis5-main">
      <div class="analysis5-main-content">
        <el-row>
          <el-col :span="12">
            <div class="map">
              <img src="~@/assets/images/map2.png" alt="">
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box">
              <div class="box-card">
                <box-card-single-analysis-5-lxxinguanritongji title="陇西新冠疫情日统计分析"></box-card-single-analysis-5-lxxinguanritongji>
              </div>
              <div class="box-card">
                <box-card-single-analysis-5-btxinguanritongji title="本土新冠疫情日统计分析"></box-card-single-analysis-5-btxinguanritongji>
              </div>
            </div>

            <div class="box">
              <div class="box-card">
                <box-card-multi-analysis-5-longxixinguan :items="items1" title="陇西新冠疫情统计分析"></box-card-multi-analysis-5-longxixinguan>
              </div>
              <div class="box-card">
                <box-card-multi-analysis-5-lxxinguanyufang :items="items2" title="陇西新冠疫情预防统计分析"></box-card-multi-analysis-5-lxxinguanyufang>
              </div>
            </div>

            <div class="box">
              <div class="box-card">
                <box-card-multi-analysis-5-bentuxinguantongji :items="items3" title="本土新冠疫情统计分析"></box-card-multi-analysis-5-bentuxinguantongji>
              </div>
              <div class="box-card">
                <box-card-single-analysis-5-xinguanzixun :data="zixun" title="新冠疫情实时资讯"></box-card-single-analysis-5-xinguanzixun>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import analysisHome from './analysisHome'
import BoxCardMultiAnalysis5Bentuxinguantongji from './components/box-card-multi-analysis5-bentuxinguantongji.vue';
import BoxCardMultiAnalysis5Longxixinguan from './components/box-card-multi-analysis5-lxxinguantongji.vue';
import BoxCardMultiAnalysis5Lxxinguanyufang from './components/box-card-multi-analysis5-lxxinguanyufang.vue';
import BoxCardSingleAnalysis5Btxinguanritongji from './components/box-card-single-analysis5-btxinguanritongji.vue';
import BoxCardSingleAnalysis5Lxxinguanritongji from './components/box-card-single-analysis5-lxxinguanritongji.vue';
import BoxCardSingleAnalysis5Xinguanzixun from './components/box-card-single-analysis5-xinguanzixun.vue';
export default {
components: {
    analysisHome,
    BoxCardMultiAnalysis5Longxixinguan,
    BoxCardMultiAnalysis5Lxxinguanyufang,
    BoxCardMultiAnalysis5Bentuxinguantongji,
    BoxCardSingleAnalysis5Xinguanzixun,
    BoxCardSingleAnalysis5Lxxinguanritongji,
    BoxCardSingleAnalysis5Btxinguanritongji
  },
  data() {
    return {
      zixun:[
        {
          id:0,
          createtime:'2021-11-10  10:17',
          title:'大连新增本土确诊60例'
        },
        {
          id:2,
          createtime:'2021-11-10  08:17',
          title:'31省区市新增本土确诊70例：大连新增本土确诊60例'
        },
        {
          id:3,
          createtime:'2021-11-10  08:12',
          title:'辽宁新增本土确诊病例60例均在大连'
        },
        {
          id:4,
          createtime:'2021-11-10  08:02',
          title:'黑龙江新增2例本土确诊'
        },
        {
          id:5,
          createtime:'2021-11-10  06:17',
          title:'国家卫健委：我国防疫坚持动态清零而非零感染'
        },
        {
          id:6,
          createtime:'2021-11-10  03:17',
          title:'背景新增1例新冠本土确诊病例'
        }
      ],
      items1:[
        {
          id:0,
          label:'现有确诊'
        },
        {
          id:1,
          label:'新增确诊'
        }
      ],
      items2:[
        {
          id:0,
          label:'疫苗接种'
        },
        {
          id:1,
          label:'核算检测'
        }
      ],
      items3:[
        {
          id:0,
          label:'现有确诊'
        },
        {
          id:1,
          label:'新增确诊'
        },
        {
          id:2,
          label:'现有疑似'
        }
      ]
    };
  },
  methods: {
  
  },
};
</script>

<style scoped lang="less">
.left{float: left;}
.right{float: right;}
.red{ background: red;}
.green{ background: green;}
.blue{ background: blue;}
.yellow{ background: yellow; }
.data-container{
  background:url('~@/assets/images/large-bg.png') no-repeat;
  height: 100vh;
  background-size:cover;
  background-position: center center;
  .analysis5-main{
    .analysis5-main-content{
      padding:.1rem;
      .el-row{
        height: calc(100vh - 1.23rem);
        .el-col{
          height:calc(100vh - 1.23rem);
          .borderBottom-1px{
            border-bottom: .01rem solid #7787C7 ;
          }
          .borderBottom-2px{
            border-bottom: .02rem solid #7787C7 ;
          }
          .box{
            display: flex;
            justify-content: space-between;            
          }
          .map{
            width: 100%;
            height: 100%;
            position:relative;
            img{
              position: absolute;
              width: 70%;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              margin: auto;
            }
          }
          .box-card{
            width: 49%;
            margin-left:0.5%;
            margin-right: 0.5%;
            height:calc( (100vh - 1.23rem) / 3 );
            .head-wrap{
              font-size: .16rem;
              color:#ffffff;
              overflow: hidden;
              .title{
                height: .26rem;
                line-height: .262rem;
              }
              .operate{
                span{
                  height: .26rem;
                  line-height: .26rem;
                  display: inline-block;
                  cursor: pointer;
                  background: url('~@/assets/images/671.png') no-repeat center center;
                  background-size: contain;
                  padding: 1px .2rem;
                }
                span.active{
                  background: url('~@/assets/images/670.png') no-repeat center center;
                  background-size: contain;
                  padding: 1px .2rem;
                }
              }
            }
            .content-wrap{
              width: 100%;
              height:calc( (100vh - 1.23rem) / 3 - .46rem) ;
              .chart-content{
                width: 100%;
                height:calc( (100vh - 1.23rem) / 3 - .46rem) ;
                float: left;
                overflow: hidden;
              }
            }
            img{width: 100%;float: left;}
          }
        }
      }
    }
  }
}
</style>

